<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card" v-for="(item, index) in recordArr" :key="index">
      <div slot="header" class="clearfix">
        <span
          >{{ item.weekDate }}
          {{ item.date }}
          <!-- {{ item.weekDate == "周日" ? "（米面粮油干调类按月报量，报量时点击选择单品）"  : ""}} -->
        </span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="chooseMeal(index, 'details_single')"
          >选择单品</el-button
        >
      </div>
      <!-- details_noon: [], //午餐列表
          details_morning: [], //早餐列表
          details_evening: [], //晚餐列表
          details_single: [], //单品列表 -->
      <!-- @/assets/images/zaocan.png
          @/assets/images/wucan.png
          @/assets/images/wancan.png -->
      <div class="flex-row top-lin">
        <div
          class="flex-col text item"
          v-for="(c_it, c_in) in canArr"
          :key="c_in"
        >
          <p>{{ c_it.title }}</p>
          <img class="icon_fn" :src="c_it.icon" alt="zaocan" />
          <el-button
            size="small"
            class="badge-item"
            v-if="item[c_it.key].length == 0"
            @click="chooseMeal(index, c_it.key)"
            >请选择</el-button
          >
          <el-badge
            :value="item[c_it.key].length"
            class="badge-item"
            v-else-if="item[c_it.key].length > 0 && tag == 1"
          >
            <el-tag @click="chooseMeal(index, c_it.key)">已选择</el-tag>
          </el-badge>
          <el-badge
            :value="item[c_it.key].length"
            class="badge-item"
            v-else-if="item[c_it.key].length > 0 && tag == 0"
          >
            <el-tag @click="chooseMeal(index, c_it.key)">已选择</el-tag>
          </el-badge>
        </div>
      </div>
      <div
        class="flex-row"
        style="margin-top: 10px; flex-wrap: wrap"
        v-if="item.details_single.length > 0"
      >
        <!-- <p style="padding: 0">已选单品：</p> -->
        <el-tag
          size="mini"
          style="margin-right: 5px; margin-bottom: 5px"
          v-for="(d, dIndex) in item.details_single"
          :key="dIndex"
          >{{ d.typeName }}</el-tag
        >
      </div>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('cancel', 'middie')">关闭</el-button>
    </div>

    <el-dialog
      title="菜单选择"
      :visible.sync="checObj.open"
      width="80%"
      append-to-body
      :before-close="handleClose"
      class="universal-from"
    >
      <checMenu
        v-if="checObj.open"
        @cancel="cancelChec"
        @submitFileForm="submitFileForm"
        ref="checMenu"
        :checObj="checObj"
        :typeArr="typeArr"
      ></checMenu>
    </el-dialog>
    <el-dialog
      title="单品选择"
      :visible.sync="checObj.danOpen"
      width="80%"
      append-to-body
      :before-close="handleClose"
      class="universal-from"
    >
      <checDan
        v-if="checObj.danOpen"
        @cancel="cancelChec"
        @submitFileForm="submitFileForm"
        ref="checMenu"
        :checObj="checObj"
        :typeArr="typeArr"
      ></checDan>
    </el-dialog>
    <el-dialog
      title="套餐选择"
      :visible.sync="checObj.mailOpen"
      width="60%"
      append-to-body
      :before-close="handleClose"
      class="universal-from"
    >
      <checmall
        v-if="checObj.mailOpen"
        @cancel="cancelChec"
        @submitFileForm="submitFileForm"
        ref="checMenu"
        :checObj="checObj"
        :typeArr="typeArr"
      ></checmall>
    </el-dialog>
  </div>
</template>
        <script>
import checMenu from "./checMenu"; //选择菜谱
import checDan from "./checDan"; //选择单品
import checmall from "./checmall"; //选择单品
import { getFormaType } from "@/api/system/type";
import { addDose, getDoseInfoManage } from "@/api/system/dose_manage";
import { getListSet } from "@/api/system/setting";
export default {
  components: { checMenu, checDan, checmall },
  name: "addMiddle",
  data() {
    return {
      doseDateArr: [],
      recordArr: [],
      loading: true,
      typeArr: [],
      checArr: [], //选择的菜谱
      // <!-- details_noon: [], //午餐列表
      //     details_morning: [], //早餐列表
      //     details_evening: [], //晚餐列表
      //     details_single: [], //单品列表 -->
      // @/assets/images/zaocan.png
      // @/assets/images/wucan.png
      // @/assets/images/wancan.png
      canArr: [
        {
          title: "早餐",
          icon: require("@/assets/images/zaocan.png"),
          key: "details_morning",
          val: null,
        },
        {
          title: "午餐",
          icon: require("@/assets/images/wucan.png"),
          key: "details_noon",
          val: null,
        },
        {
          title: "晚餐",
          icon: require("@/assets/images/wancan.png"),
          key: "details_evening",
          val: null,
        },
      ],
      checObj: {
        danOpen: false, //选择单品
        open: false, //选择菜谱
        mailOpen: false, //选择套餐
        checArr: [],
        weekStart: null,
        weekEnd: null,
        week: null,
        weekTag: null,
        type: null, //早中晚
        tableDataMenuSelect: [],
        val: [],
      },
      tag: 0, //0 小学  2 初中
      doseFlag:0,//0开启报量   1未开启报量
    };
  },
  created() {
    this.tag = this.$store.state.user.dept.tag;
    // console.log(this.$store.state.user.dept)
    //计算报量日期
    this.doseDateArr = [];
    getListSet({ pageNum: 1, pageSize: 1 }).then((response) => {
      this.doseFlag = response.rows[0].doseFlag

      this.sfBaol()
      var num = 7 * response.rows[0].doseTime;
      var today = new Date();
      var now = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + num
      );

      var weekDay = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      var firstDay = new Date(
        now.setDate(
          now.getDate() - now.getDay() + (now.getDay() === 0 ? -6 : 1)
        )
      );
      for (var i = 0; i < 7; i++) {
        var tempDate = new Date(firstDay);
        tempDate.setDate(firstDay.getDate() + i);
        var year = tempDate.getFullYear();
        var month = tempDate.getMonth() + 1;
        var day = tempDate.getDate();
        // console.log()
        var da = this.parseTime(`${year}-${month}-${day}`, "{y}-{m}-{d}");
        this.doseDateArr.push(da);

        this.recordArr.push({
          weekDate: weekDay[i],
          week: da,
          date: da,
          details_noon: [], //午餐列表
          details_morning: [], //早餐列表
          details_evening: [], //晚餐列表
          details_single: [], //单品列表
        });
      }
      this.show();
    });
  },
  methods: {
    sfBaol(){
      if (this.doseFlag == 1) {
        this.$modal.msg("未开启报量");
      }
    },
    submitFileForm() {
      this.checObj.open = false;
      this.checObj.danOpen = false;
      this.checObj.mailOpen = false;

      this.show();
    },
    cancelChec() {
      this.checObj.open = false;
      this.checObj.danOpen = false;
      this.checObj.mailOpen = false;
    },
    //点击选择菜品  早餐，午餐，晚餐
    chooseMeal(index, key) {

      // console.log(key);
      if (this.doseFlag == 1) {
        this.$modal.msg("未开启报量");
        return
      } else if (key == "details_morning") {
        this.checObj.type = "早餐";
        this.checObj.tableDataMenuSelect = this.recordArr[index][key];
      } else if (key == "details_noon") {
        this.checObj.type = "午餐";
        this.checObj.tableDataMenuSelect = this.recordArr[index][key];
      } else if (key == "details_evening") {
        this.checObj.type = "晚餐";
        this.checObj.tableDataMenuSelect = this.recordArr[index][key];
      } else if (key == "details_single") {
        this.checObj.type = "单品";
        this.checObj.tableDataMenuSelect = this.recordArr[index][key];
      }

      this.checObj.val = [];
      if (key == "details_single") {
        this.checObj.tableDataMenuSelect.forEach((item, index) => {
          item.id = item.typeId;
          item.name = item.typeName;
          this.checObj.val.push(item.typeId);
        });
        this.checObj.danOpen = true;
      } else {
        this.checObj.tableDataMenuSelect.forEach((item, index) => {
          this.checObj.val.push(item.id);
        });
        if (this.tag == 1) {
          this.checObj.open = true;
        } else {
          this.checObj.mailOpen = true;
        }
      }

      this.checObj.weekStart = this.recordArr[0].week; //添加的报量周开始日期
      this.checObj.weekEnd = this.recordArr[6].week; //添加的报量周结束日期

      this.checObj.week = this.recordArr[index].week; //当前添加的日期
      this.checObj.weekTag = this.recordArr[index].weekDate; //添加的日期是周几

      this.checObj.checArr = this.recordArr[index][key];
      // console.log(this.checObj)
    },
    show() {
      this.loading = true;
      getDoseInfoManage({
        weekStart: this.doseDateArr[0],
        weekEnd: this.doseDateArr[6],
      }).then((response) => {
        if (response.data.details == null) {
          this.loading = false;
          return;
        }
        if (response.data.details.length > 0) {
          response.data.details.forEach((item, index) => {
            var week = this.getWeek(item.week);

            item.weekDate = week;
            item.week = item.week;
            item.date = item.week;
            if (week == "周一") {
              this.recordArr[0] = item;
            } else if (week == "周二") {
              this.recordArr[1] = item;
            } else if (week == "周三") {
              this.recordArr[2] = item;
            } else if (week == "周四") {
              this.recordArr[3] = item;
            } else if (week == "周五") {
              this.recordArr[4] = item;
            } else if (week == "周六") {
              this.recordArr[5] = item;
            } else if (week == "周日") {
              this.recordArr[6] = item;
            }
          });

          this.loading = false;
        }
      });
      console.log(this.recordArr);
      // getFormaType({ pageNum: -1, pageSize: -1 }).then((response) => {
      //   this.typeArr = response.rows;
      // });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
        

<style scoped>
p {
  margin: 0;
  padding: 8px;
}

.app-container {
  display: flex;
  flex-wrap: wrap;
}

.box-card {
  width: 400px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.box-card-taocan {
  width: 100%;
  margin-bottom: 10px;
  margin-right: 20px;
}

.icon_fn {
  width: 40px;
}

.top-lin {
  justify-content: space-between;
}

.flex-row {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge-item {
  margin-top: 8px;
}

.mb10 {
  margin-bottom: 10px;
}
.dialog-footer {
  position: absolute;
  bottom: 50px;
  right: 50px;
}
</style>